<template>
  <div class="shopcar_box">

    <div class="mui-card" v-for="(item,i) in goodList" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-switch 
          v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
          <img :src="item.thumb_path" alt="">
          <div class="info">
            <h3>{{ item.title }}</h3>
            <p>
              <span class="price">￥{{ item.sell_price }}</span>
              <count-box :num="item.id"></count-box>
              <a href="#" @click.prevent="remove(item.id,i)">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>



    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已勾选商品 <span class="red">{{$store.getters.getgoodsInfo.count}}</span> 件， 总价 <span class="red">￥{{ $store.getters.getgoodsInfo.amount }}</span></p>
            </div>
             <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>

  </div>


  <!-- 结算区域 -->
  
</template>

<script>
import count from '../comment/countForshopcar.vue'
export default {
  data() {
    return {
      goodList:[]
    };
  },
  created() {
    this.getshopCarList()
  },
  methods: {
    // 获取购物车基本数据
    getshopCarList (){
      var idArr = []
      this.$store.state.car.forEach(item=>{
        idArr.push(item.id)
      })
      if(idArr.length <= 0){
        return
      }
      console.log(idArr);
      
      this.$http.get('api/goods/getshopcarlist/' + idArr.join(',')).then(result=>{
        this.goodList = result.body.message
      })
    },
    remove(id,index){
      this.goodList.splice(index,1)
      this.$store.commit("removeFromCar",id)
    },
    selectedChanged(id,val){
      this.$store.commit("updateGoodsSlected",{id,selected:val})
    }
  },
  components: {
    'count-box':count
  }
};
</script>

<style lang="scss" scoped>
.shopcar_box {
  .mui-card-content-inner {
  display: flex;
  padding: 5px;
  }
  img {
    width:80px;
    height: 80px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      display: flex;
      justify-content: space-around;
      line-height: 35px;
    }
    h3{
      font-size: 14px;
    }
    .price {
      color: red;
      font-weight: 800;
    }
  }
  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>

